import React from "react";
// import { Map, is, List, Seq, fromJS, Range } from "immutable";

const App = () => {
  // 定义immutable对象
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // toJS()可以将immutable对象转成普通的js对象
  // 项目里面不要使用toJS()，调试代码的时候使用
  // console.log(map1.toJS());

  // 获取immutable的属性，可以使用get方法
  // console.log(map1.get("a"));

  // 修改immutable对象，可以使用set方法，set方法不会改变原数据，只会产生一个新的immutable对象
  // const map2 = map1.set("a", 5);
  // console.log(map2);
  // 如果里面的值发生了改变，那么这两个对象的指向也会不一样，如果值不变，指向也不变
  // console.log(map1 === map2);

  // const obj = {
  //   a: 3,
  //   b: 4,
  // };
  // const map1 = Map(obj);
  // const map2 = Map(obj);
  // console.log(map1 === map2); // false
  // console.log(map1.equals(map2)); // true  equals方法比对的是里面的内容
  // console.log(is(map1, map2)); // true  is方法比较的也是内容

  // 创建immutable数组
  // 可以使用一些push、unshift、concat这样的方法
  // size属性相当于length，表示数组长度
  // const list1 = List([1, 2]);
  // console.log(list1);
  // const list2 = list1.push(3, 4, 5);
  // const list3 = list2.unshift(0);
  // const list4 = list1.concat(list2, list3);
  // console.log(list4.size);

  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  //   c: 5,
  // });
  // map1.map((v, k) => {
  //   console.log(v, k);
  // });

  // immutable对象的合并
  // merge方法
  // mergeDeep方法做深度合并
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  //   z: {
  //     x: 10,
  //     y: 20,
  //   },
  // });
  // const map2 = Map({
  //   c: 5,
  //   z: {
  //     x: 10,
  //     w: 30,
  //   },
  // });
  // const map3 = map1.mergeDeep(map2);
  // console.log(map3.toJS());

  // immutable数组的合并
  // const list1 = List([1, 2, 3]);
  // const list2 = List([4, 5, 6]);
  // const list3 = list1.concat(list2);
  // const list4 = list3.concat([7, 8]);
  // console.log(list4);

  // Seq既可以创建对象，也可以创建数组
  // const map1 = Seq({
  //   a: 3,
  //   b: 4,
  // });
  // console.log(map1);
  // const list1 = Seq([1, 2, 3]);
  // console.log(list1);

  // Seq是由惰性的，只有使用到了才会执行
  // const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8])
  //   .filter((x) => {
  //     console.log("filter x:" + x);
  //     return x % 2 !== 0;
  //   })
  //   .map((x) => {
  //     console.log("map x:" + x);
  //     return x * x;
  //   });
  // console.log(oddSquares.get(1));

  // fromJs方法也可以创建对象和数组
  // 会递归地创建immutable
  // const map1 = fromJS({
  //   a: 3,
  //   b: 4,
  //   c: {
  //     x: 10,
  //     y: 20,
  //   },
  // });
  // console.log(map1);

  // const deep = Map({ a: 1, b: 2, c: List([3, 4, 5]) });
  // console.log(deep.toObject()); // 用来转成普通地js对象，只会转第一层
  // console.log(deep.toArray()); // 将immutable对象转成普通数组，也只会转第一层
  // console.log(deep.toJS()); // 用来转成普通地js对象，只会转每一层
  // console.log(JSON.stringify(deep)); // 直接转每一层，转成js字符串对象

  // const nested = fromJS({ a: { b: { c: [3, 4, 5] } } });
  // console.log(nested);
  // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ] } } }
  // const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
  // console.log(nested2);
  // Map { "a": Map { "b": Map { "c": List [ 3, 4, 5 ], "d": 6 } } }*
  // getIn方法可以深度地获取复杂对象的值
  // console.log(nested2.getIn(["a", "b", "d"]));
  // setIn方法可以深度地设置复杂对象的值
  // const nested3 = nested2.setIn(["a", "b", "d"], 9);
  // console.log(nested3);
  // updateIn可以依赖于前一次的值进行设置，第二个参数是一个回调函数
  // const nest4 = nested2.updateIn(["a", "b", "d"], (val) => val + 1);
  // console.log(nest4.toJS());

  // const aRange = Range(1, Infinity)
  //   .skip(1000)
  //   .map((n) => -n)
  //   .filter((n) => n % 2 === 0)
  //   .take(2)
  //   .reduce((r, n) => r * n, 1);
  // console.log(aRange); // 1006008

  return (
    <>
      <h3>immutable</h3>
      {/* <input type="range" /> */}
    </>
  );
};

export default App;
